<script setup lang="ts">
import { ref, onMounted } from 'vue'
import carousel from './Carousel.vue'
import { getImageUrl } from './utils'
import ColorThief from 'colorthief'

const colorthief = new ColorThief()
const opacity = 0.8
const images = ref<string[]>([])
let colors = ref<string>('')

async function onImageChange(image: HTMLImageElement) {
  const palettes = await colorthief.getColor(image)
  colors.value = `rgba(${palettes.join(',')})`
}

onMounted(() => {
  const width = Math.floor(window.innerWidth / 2)
  const height = Math.floor(window.innerWidth / 3)
  for (let index = 0; index < 7; index++) {
    images.value.push(getImageUrl(width, height))
  }
})
</script>

<template>
  <div class="app-container">
    <h1 class="title">背景随3D轮播图改变</h1>
    <carousel :images-list="images" @imageChange="onImageChange" />
  </div>
</template>

<style lang="scss" scope>
.app-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: v-bind(colors);

  .title {
    color: #fff;
    padding: 20px 0;
    text-align: center;
    mix-blend-mode: difference;
  }
}
</style>
